<template>
  <div>
    <div class="exportBtns">
      <el-button type="primary" :loading="loading" @click="handleSingleExport">
        单节点导出
      </el-button>
      <el-button type="primary" :loading="loading" @click="handleMultiExport">
        多节点导出
      </el-button>
    </div>
    <el-scrollbar height="400">
      <div id="printMultiDom">
        <PrintDoc
          v-for="(item, idx) in 15"
          :key="idx"
          class="printItem"
          :pageIndex="idx"
          :pageNum="15"
        />
      </div>
    </el-scrollbar>
  </div>
</template>

<script lang="ts" setup>
import { pdfExportMulti, pdfExportSingle } from '@lib/pdf'
import { ref } from 'vue'

import PrintDoc from './PrintDoc.vue'

const loading = ref(false)

function handleSingleExport() {
  loading.value = true

  pdfExportSingle(
    document.querySelector('#printMultiDom')!,
    {
      orientation: 'portrait',
      fileName: '单节点导出.pdf',
      scale: 2
    },
    () => {
      loading.value = false
    }
  )
}

function handleMultiExport() {
  loading.value = true

  pdfExportMulti(
    document.querySelectorAll('.printItem'),
    {
      orientation: 'portrait',
      fileName: '多节点导出.pdf',
      scale: 2
    },
    () => {
      loading.value = false
    }
  )
}
</script>

<style lang="scss" scoped>
.exportBtns {
  margin: 15px 0;
}

#printMultiDom {
  width: 793.69px;
}
</style>
